/**
 *  目标： 封装一个使用函数调用的方式的弹出框
 *
 */
import { createRef } from 'react';
import ReactDOM from 'react-dom/client';
import ToastContainer from './ToastContainer';
// 这个ref要放到函数的外面
const ref = createRef<ToastContainer>();
// 1. 准备一个函数，该函数只需要调用，就能出来一个组件
export default function FuncTaost(message: string, type: ToastType = "success") {
  // 2. 需要在函数调用的时候，生成一个组件
  // 2.1 需要一个新的 根节点
  // 判断一下，是否已经存在 根节点 需要的div
  let rootEl = document.getElementById('toast-root')
  // if(id为toast-root的div已经存在){
  if (rootEl == null) {
    // 创建 id 为 toast-root 的 div
    rootEl = document.createElement('div');
    rootEl.id = 'toast-root'
    document.body.append(rootEl);
    // 2.2 把一个toast组件渲染到 2.1 的根节点中
    const root = ReactDOM.createRoot(rootEl)
    root.render(<ToastContainer ref={ref} />)
    setTimeout(() => {
      ref.current?.create(type, message)
    });
  } else {
    ref.current?.create(type, message)
  }
}